<template>
    <div class="basicWrapper">
        <el-row :gutter="20">
            <el-col :span="12">
                <h2 class="formH2">修改用户信息</h2>
                <span @click="handleBackTo()" class="handleBack">返回基本信息</span>
                <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm" v-loading="loading">
                    <el-form-item label="登录账号" prop="userName">
                        <el-input disabled v-model="form.userName"></el-input>
                    </el-form-item>
                    <el-form-item :label="ming" prop="nickName">
                        <el-input disabled v-model="form.nickName"></el-input>
                    </el-form-item>
                   
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input disabled v-model="form.email"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="性别" prop="sex" v-if="userInfo.registrationType=='1'">
                        <el-radio-group v-model="form.sex" :disabled="userInfo.iuiCertification=='1'">
                            <el-radio label="0">男</el-radio>
                            <el-radio label="1">女</el-radio>
                            <el-radio label="2">保密</el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                    <el-form-item label="简介" prop="profile">
                        <el-input type="textarea" :rows="5" v-model="form.profile"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="submitForm()">立即修改</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="12">
                <div class="formRight">
                    <!-- <p class="uploadTitle">头像</p> -->
                    <el-upload class="avatar-uploader" :action="imageUploadUrl" :show-file-list="false"
                        :http-request="uploadFile" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                        :on-error="handleError">
                        <img v-if="imgUrl" :src="imgUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <p class="uploadTip">上传头像图片不超过10M，且只能上传jpg、png类型</p>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getUserInfo2, changeUserInfo, uploadBinaryFile } from "@/request/api/user"
export default {
    data() {
        return {
            ming:'',
            form: {
                // userName: '',//登录账号
                // nickName: '',//昵称
                phone: '',//手机号
                // email: '',//邮箱
                // sex: '',//性别
                profile: '',//简介
            },
            avatar: '',//头像
            imgUrl: '',
            imageUploadUrl: '/dev-api/system/user/profile/avatar',
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
            },
            loading:true,
            sexLabel:'性别',
            userInfo:{}
        }
    },
    created() {
        this.getInfo()
    },
    methods: {
        // 获取用户信息
        getInfo() {
            getUserInfo2().then(res => {
                if(res.data.result.registrationType!=='1'){
                    this.ming='机构名称'
                }else{
                    this.ming='真实姓名'
                }
                if (res.data.code === 200) {
                    this.userInfo=res.data.result
                    this.loading=false
                    this.form.userName = res.data.result.userName
                    this.form.nickName = res.data.result.nickName
                    this.form.phone = res.data.result.phone
                    this.form.email = res.data.result.email
                    // this.form.sex = res.data.result.sex
                    this.form.profile = res.data.result.profile
                    this.imgUrl = res.data.result.avatar
                    // var type=res.data.result.registrationType
                    // if(type==='1'){
                    //     this.sexLabel='性别'
                    // }else{
                    //     this.sexLabel='法人性别'
                    // }
                }
                this.loading=false
            })
        },
        // 上传文件成功
        handleAvatarSuccess(response, file) {
            this.imgUrl = URL.createObjectURL(file.raw);
            this.form.avatar = response.message;
            // this.$refs.headimgUpload1.clearValidate(); // 关闭校验
        },
        // 限制上传的类型
        beforeAvatarUpload(file) {
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isLt10M) {
                this.$message.error("上传图片大小不能超过 10M!");
                return false;
            }
            var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
            const extension = testmsg === "jpg" || testmsg === "JPG"|| testmsg === "JPEG"|| testmsg === "jpeg";
            const extension2 = testmsg === "png" || testmsg === "PNG";
            if (!extension && !extension2) {
                this.$message({
                    message: "上传图片只能是 jpg, png格式!",
                    type: "error",
                });
                return false;
            }
        },
        // 上传文件失败
        handleError(err) {
            let errInfo = JSON.parse(err["message"]);
            this.$message.error(`文件上传失败，原因：${errInfo.message}`);
        },
        // 修改用户信息
        submitForm() {
            changeUserInfo(this.form).then(res => {
                if (res.data.code === 200) {
                    this.$message({
                        message: res.data.message,
                        type: "success",
                    });
                    this.getInfo()
                } else {
                    this.$message.error(res.data.message);
                }
            })
        },
        // 上传头像
        uploadFile(params) {
            let fd = new FormData();
            fd.append('file', params.file);
            uploadBinaryFile(fd).then(res => {
                if (res.data.code === 200) {
                    this.$message({
                        message: '头像上传成功',
                        type: 'success',
                    });
                    this.imgUrl = res.data.url
                }else{
                    this.$message.error(res.data.message);
                }
            })
        },
        // 返回
        handleBackTo(){
            this.$emit('handleBack')
            // this.$router.push("/basicInfo");
        }
    }
}
</script>
<style lang="less" scoped>
@import "./basicInfo.less";
/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
}

.uploadTip {
    color: #666;
    font-size: 14px;
    margin-top: 20px;
}

.uploadTitle {
    font-size: 16px;
    color: #606266;
}

.formRight {
    text-align: center;
    padding-top: 100px;
}

.demo-ruleForm {
    margin-top: 20px;
}


</style>

